<template>
  <div>
    <a-button type="primary"
    @click="showAddFrom()">添加账号</a-button>

    <a-table
      ref="table"
      :columns="columns"
      :data-source="list"
      :rowKey="(record) => record.id"
      class="communityList"
    >

      <template #index="text,record,index">
          {{ index+1 }}
      </template>

      <template #icon="text">
          <img :src="text">
      </template>

      <template #back="text">
          <img :src="text">
      </template>

      <template #do>
          <a-space>
          <a-button type="primary" size="small">编辑</a-button>
          <a-button type="danger" size="small">删除</a-button>
          </a-space>
      </template>

    </a-table>
<!-- http://123.57.249.44/imgs -->
    <form-box title="add"
    @hide="hideAddFrom"
    @update="AddAccount"
    v-show="showAddFromFlag">

        <a-form-item label="社区名称">
            <a-input v-decorator="['name',{ rules:[{required: true, message: '请输入正确的社区名'}]}]" placeholder="单行输入"></a-input>
        </a-form-item>

        <a-form-item label="话题名称">
            <a-input v-decorator="['topicName',{ rules:[{required: true, message: '请输入正确的话题名'}]}]" placeholder="单行输入"></a-input>
        </a-form-item>

        <a-form-item label="序号">
            <a-input v-decorator="['id',{ rules:[{required: true, message: '请输入正确的序号'}]}]" placeholder="单行输入"></a-input>
        </a-form-item>

        <a-form-item label="社区头像">
            <a-upload
                name="avatar"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                action="http://192.168.2.46:8081/cm-boss/common/upload"
                :before-upload="beforeUpload"
                @change="handleChange"
            >
                <img v-if="iconimageUrl" :src="iconimageUrl" alt="avatar" />
                <div v-else>
                <a-icon :type="iconloading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">
                    Upload
                </div>
                </div>
            </a-upload>
        </a-form-item>

        <a-form-item label="社区背景">
            <a-upload
                name="avatar"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                action="http://192.168.2.46:8081/cm-boss/common/upload"
                :before-upload="backbeforeUpload"
                @change="backhandleChange"
            >
                <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                <div v-else>
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">
                    Upload
                </div>
                </div>
            </a-upload>
        </a-form-item>

        <a-form-item label="一句话简介">
            <a-textarea placeholder="单行输入" rows="5"
            v-decorator="['intro',{ rules:[{required: true, message: '请输入正确的简介'}]}]"></a-textarea>
        </a-form-item>

    </form-box>

  </div>
</template>

<script>
import { getCommunityList, addCommunity } from "@/api/quanz/community";
import formBox from '@/components/formBox.vue';

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

export default {
  components: { formBox },
    data() {
      return {
          loading: false,
          imageUrl: '',
          iconloading: false,
          iconimageUrl: '',
          showAddFromFlag: false,
          list: [],
          columns: [
            {
              title: "ID",
              dataIndex: "id",
              key: "id",
            },
            {
              title: "序号",
              key: "index",
              scopedSlots: { customRender: "index" },
            },
            {
              title: "社区名称",
              dataIndex: "name",
              key: "name",
            },
            {
              title: "社区图标",
              dataIndex: "icon",
              key: "icon",
              scopedSlots: { customRender: "icon" },
            },
            {
              title: "社区背景图",
              dataIndex: "backgroundImg",
              key: "backgroundImg",
              scopedSlots: { customRender: "back" },
            },
            {
              title: "一句话简介",
              dataIndex: "intro",
              key: "intro",
            },
            {
              title: "操作",
              dataIndex: "do",
              key: "do",
              scopedSlots: { customRender: "do" },
            },
          ],
      }
    },
    methods:{
        backhandleChange(info) {
        if (info.file.status === 'uploading') {
            this.loading = true;
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, imageUrl => {
            this.imageUrl = imageUrl;
            this.loading = false;
            });
        }
        },
        backbeforeUpload(file) {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            this.$message.error('You can only upload JPG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            this.$message.error('Image must smaller than 2MB!');
        }
        return isJpgOrPng && isLt2M;
        },
        handleChange(info) {
            if (info.file.status === 'uploading') {
                this.iconloading = true;
                return;
            }
            if (info.file.status === 'done') {
                // Get this url from response in real world.
                getBase64(info.file.originFileObj, iconimageUrl => {
                this.iconimageUrl = iconimageUrl;
                this.iconloading = false;
                });
            }
            },
            beforeUpload(file) {
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isJpgOrPng) {
                this.$message.error('You can only upload JPG file!');
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('Image must smaller than 2MB!');
            }
            return isJpgOrPng && isLt2M;
        },
        //==============show\hide from=================
        showAddFrom(){
            this.showAddFromFlag = true;
        },
        hideAddFrom(){
            this.showAddFromFlag = false;
        },
        //===============api==================
        getCommunityList(){
            getCommunityList({
                pageNumber: 1,
                pageSize: 8,
            }).then((res)=> {
                console.log("==========CommunityList==========", res.data);
                this.list = res.data.data.content;
            })
        },
        AddAccount({ name, topicName, id, intro }){
            addCommunity({
                name: name,
                backgroundImg: "http://123.57.249.44/imgs/shoot.jpg",
                intro: intro,
                sequence: id,
                icon: "http://123.57.249.44/imgs/shoot.jpg",
                topicName: topicName,
            }).then((res)=> {
                console.log("========AddCommunity=======",res);
                this.getCommunityList();
                this.hideAddFrom();
            })
        },
    },
    mounted(){
        this.getCommunityList();
    },
}
</script>

<style>
.communityList img{
    width: 60px;
}
.avatar-uploader img{
    width: 80px;
}
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>